<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="收款记录"
      left-arrow
      :border="false"
      fixed
      @click-left="$utils.back($route.path)"
    />
    <div class="has-top" />

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-sticky :offset-top="offsetTop">
        <div class="plr-30 ptb-10 flex flex-s-b" style="background:#f5f5f5;">
          <div class="fle-1 flex flex-v-c">
            <p class="bg-white ptb-10 plr-30 br-30 flex flex-v-c" @click="showPicker = true">
              <span>{{ $utils.dateFomat('YYYY-mm', currentDate) }}</span>
              <van-icon name="arrow-down" />
            </p>
          </div>
          <div class="fle-1 tar">
            <p>收入：¥ {{ parseFloat(income).toFixed(2) }}</p>
            <p>支出：¥ {{ parseFloat(expend).toFixed(2) }}</p>
          </div>
        </div>
      </van-sticky>

      <!-- 收款记录列表 -->
      <van-list
        ref="list"
        v-model="loading"
        :finished="finished"
        :finished-text="orderList.length > 0 ? '没有更多了哦！' : ''"
        :offset="0"
        :immediate-check="false"
        @load="onLoad"
      >
        <van-cell-group v-if="orderList.length > 0">
          <van-cell
            v-for="(item, index) in orderList"
            :key="index"
            icon="bill"
            clickable
            :to="{ path: '/receiptRecord/detail/' + item.OrderId }"
          >
            <span slot="title">
              {{
                item.TransactionExplain
                  ? item.TransactionExplain
                  : item.TransactionAmount >= 0
                    ? '收入' + item.TransactionAmount + '元'
                    : '支出' + item.TransactionAmount + '元'
              }}
            </span>
            <span slot="label">{{ item.TransactionTime }}</span>
            <span
              slot="default"
              :class="{
                'color-danger': item.TransactionAmount >= 0,
                'color-dark': item.TransactionAmount < 0,
              }"
            >
              {{
                item.TransactionAmount >= 0
                  ? '+ ¥' + parseFloat(item.TransactionAmount).toFixed(2)
                  : '- ¥' + parseFloat(item.TransactionAmount).toFixed(2)
              }}
            </span>
          </van-cell>
        </van-cell-group>
        <no-data v-if="orderList.length == 0 && !loading" />
      </van-list>
    </van-pull-refresh>

    <!-- 选择记录时间 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="selectDate"
        item-height="45"
        visible-item-count="4"
        type="year-month"
        :formatter="formatter"
        @cancel="showPicker = false"
        @confirm="timeConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import noData from 'components/noData'
import { getCashierList } from 'api/order'

export default {
  components: {
    noData
  },
  props: {
    clientWidth: {
      type: Number,
      default: document.body.clientWidth
    }
  },
  data() {
    return {
      // 下拉刷新
      isLoading: false,
      showPicker: false,
      currentDate: new Date(),
      selectDate: new Date(),
      // 上拉加载更多
      loading: true,
      finished: true,
      income: 0,
      expend: 0,
      orderCondition: {
        PageIndex: 1,
        PageSize: 10,
        SearchKey: ''
      },
      orderList: []
    }
  },
  computed: {
    offsetTop() {
      return parseInt((this.clientWidth / this.$remUnit) * 10) // 设置粘性布局时距离顶部距离PX换算
    }
  },
  watch: {
    $route(to, from) {
      if (from.name == 'storeManage' && to.name == 'receiptRecord') {
        this.currentDate = new Date()
        this.selectDate = new Date()
        this.onRefresh()
      }
    }
  },
  created() {
    // 获取收银记录列表
    this.getCashierList()
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      this.income = 0
      this.expend = 0
      this.orderList.length = 0
      this.loading = true
      this.getCashierList()
      // setTimeout(() => {
      //   this.isLoading = false;
      //   this.finished = false;
      // }, 500);
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    timeConfirm(value) {
      this.currentDate = value
      this.showPicker = false
      this.onRefresh()
    },
    // 上拉异步加载更多
    onLoad() {
      console.log('加载更多')
      setTimeout(() => {
        this.loading = false
        this.finished = true
      }, 2000)
    },
    // 获取收银记录列表
    getCashierList() {
      getCashierList(this.$utils.dateFomat('YYYY-mm', this.currentDate)).then(res => {
        // console.log(res);
        this.isLoading = false
        this.loading = false
        if (res.Data) {
          this.income = res.Data.Income
          this.expend = res.Data.Expend
          this.orderList = this.orderList.concat(res.Data.OrderCashierList)
        }
      })
    }
  },
  beforeRouteUpdate(to, from) {
    console.log(from)
    if (from.name == 'storeManage') {
      console.log(this.income)
    }
  }
}
</script>

<style lang="scss" scoped>
.van-icon-bill {
  font-size: 24px;
  color: #f44;
}
</style>
